<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Install Wizard</title>
	<link rel="stylesheet" type="text/css" href="index.css">
</head>

<body style="overflow: auto;background-color: transparent">


	<div id=container class="container">
		<div class="header">
			<div class="title" id="title"></div>
			<div class="close" id="closeBtn"></div>
		</div>
		<div class="bodycontent">
			<div class="content">
				<div class="center">
					<div class="tab" id="first">
						<div class="installInfo1">
							<h3>安装引导说明</h3>
							<p>1.本安装引导用于引导用户根据开发场景安装基础功能插件、安装依赖软件、配置基本开发环境。</p>
							<p>2.本安装引导仅安装基础插件，可以在插件市场中获取更多插件。</p>
							<p>3.在线安装功能需要连接互联网下载插件和依赖软件。</p>
							<p>4.您也可以选择跳过此步骤，自己手动安装插件和依赖软件。</p>
							<p>5.点击帮助按钮，会访问线上帮助文档</p>

						</div>
						<div class="devContent">
							<form class="installSelectionType">
								<!-- <script src="common.js"></script> -->
								<label class="installSelection">
									<input type="radio" id="onlineInstall" name="choice" value="onlineInstall" checked>
									<label for="onlineInstall" id="onlineInstalllabel"></label><br>
								</label>
								<label class="installSelection" style="display:none">
									<input type="radio" id="localInstall" name="choice" value="localInstall">
									<label for="localInstall">本地安装</label><br>
								</label>
								<label class="installSelection" style="display:none">
									<input type="radio" id="justDownload" name="choice" value="justDownload">
									<label for="justDownload">仅下载不安装</label><br>
								</label>
								<label class="installSelection">
									<input type="radio" id="notNow" name="choice" value="notNow">
									<label for="notNow" id="lablenotNow"></label><br>
								</label>
							</form>
						</div>
					</div>
					<div class="tab" id="waitTab">
						<div class="wait-container">
							<h3>请稍等片刻...</h3>
							<p>正在联网进行配置文件下载、检查、校验及本地配置文件的校验等工作</p>
						</div>
					</div>
					<div class="tab" id="onlineInstallTab1">
						<div class="installInfo1">
							<h3>说明:</h3>
							<p>1.检查到有配置文件更新。本安装引导会根据配置文件更新内容。新配置文件可能修改了旧版本配置文件的问题，建议选择“是”更新配置文件。</p>
							<p>2.如果您想按照旧版配置文件操作，可以选择“否”不更新配置文件。</p>
						</div>
						<div class="devContentCol">
							<form class="SelectionUpdate">
								<input type="radio" id="onlineUpdateConfig" name="updateConfig" value="onlineUpdateConfig" checked>
								<label for="onlineUpdateConfig" id="labelonlineUpdateConfig">是</label><br>
								<input type="radio" id="onlineLocalConfig" name="updateConfig" value="onlineLocalConfig">
								<label for="onlineLocalConfig">否</label><br>
							</form>
						</div>
						<div id="onlinewarning">
						</div>
					</div>
					<div class="tab" id="onlineInstallTab2">
						<div class="installInfo1" id="osInfo">
						</div>
						<div class="devContent" id="osInfoShow">
						</div>
					</div>
					<div class="tab" id="onlineInstallTab3">
						<div class="installInfo1">
							<pre><h2>开发场景</h2></pre>
						</div>
						<div class="devContent">
							<form id="checkboxForm">
								<script src="common.js"></script>
								<!-- 复选框列表 -->
							</form>

							<div class="formSeparator"></div>

							<!-- 输出文本框 -->
							<div class="depOutputTextbox">
								<pre id="depOutDesc" style="white-space: pre-wrap;"></pre>

								<pre id="outputPre"></pre>
							</div>
						</div>
					</div>
					<div class="tab" id="onlineInstallTab4">
						<div class="progress-container" style="display: none">
							<progress class="download-view" value="60" max="100"> </progress>
							<span class="progress-download">插件下载进度:60%</span>
						</div>

						<div class="progress-container" style="display: none">
							<progress class="install-view" value="50" max="100"></progress>
							<span class="progress-install">插件安装进度:50%</span>
						</div>

						<div class="progress-container" style="display: none">
							<progress class="pkg-install-view" value="50" max="100" style="overflow:hidden;"></progress>
							<span class="pkg-progress-install"></span>
						</div>
						<div class="progress-container">
							<progress class="progress-view" value="50" max="100" style="overflow:hidden;"></progress>
							<span class="progressinfo"></span>
						</div>

						<div class="detailInstallOutputTextbox">
							<label for="detailInstallOutputTextbox">安装详情</label>
							<pre id="detailInstallPre" style="display: block"></pre>
							<pre id="installLogPre" style="display: none"></pre>
							<pre id="extInstallLogPre" style="display: none"></pre>
							<pre id="finishPage" style="display: none"></pre>
							<div class="btn-group">
							<button class="switchInstallOutput" id="switchInstallOutput">切换输出</button>
							</div>
						</div>
					</div>
					<div class="downloadtab" id="justDownloadTab2">
						<div class="installInfo1">
							<h3>说明:</h3>
							<p>1.检查到有配置文件更新。本安装引导会根据配置文件更新内容。新配置文件可能修改了旧版本配置文件的问题，建议选择“是”更新配置文件。</p>
							<p>2.如果您想按照旧版配置文件操作，可以选择“否”不更新配置文件。</p>
						</div>
						<div class="devContentCol">
							<form class="SelectionUpdate">
								<input type="radio" id="downloadUpdateConfig" name="updateConfig" value="downloadUpdateConfig" checked>
								<label for="downloadUpdateConfig" id="labeldownloadUpdateConfig">是</label><br>
								<input type="radio" id="downloadlocalConfig" name="updateConfig" value="downloadlocalConfig">
								<label for="downloadlocalConfig">否</label><br>
							</form>
						</div>
						<div id="downloadwarning">
						</div>
					</div>
					<div class="downloadtab" id="justDownloadTab3">
						<label>请指定配置文件及软件下载目录</label>
						<div class="btn-group">
						<input placeholder="选择目录" id="selectPathInput" readonly>
						<button id="selectConfigPath">选择目录</button>
						</div>
					</div>
					<div class="downloadtab" id="justDownloadTab4">
						<div class="progress-container">
							<progress class="download-view" value="60" max="100"> </progress>
							<span class="progress-download">配置文件:60%</span>
						</div>
						<div class="progress-container">
							<progress class="download-view" value="60" max="100"> </progress>
							<span class="progress-download">插件下载进度:60%</span>
						</div>
						<div class="progress-container">
							<progress class="install-view" value="50" max="100"></progress>
							<span class="progress-install">软件包下载进度:50%</span>
					    </div>
					</div>
					<div class="localinstalltab" id="localInstallTab1">
						<label>导入配置文件所在目录</label>
						<div class="btn-group">
						<input placeholder="选择目录" id="inputImCgPath" readonly>
						<button id="btImCgPath">选择目录</button>
						</div>
						<label>导入插件及软件包所在目录</label>
						<div class="btn-group">
						<input placeholder="选择目录" id="inputImStPath" readonly>
						<button id="btImStPath">选择目录</button>
						</div>
					</div>
					<div class="localinstalltab" id="localInstallTab2">
						<div class="preparing-container">
							<h3>请稍等片刻...</h3>
							<p>正在对配置文件进行检查、校验工作</p>
						</div>
					</div>
					<div class="localinstalltab" id="localInstallTab3">
						<div class="installInfo1" id="osInfo">
						</div>
						<div class="devContent" id="osInfoShow">
						</div>
					</div>
					<div class="localinstalltab" id="localInstallTab4">
						<label>请指定配置文件及软件下载目录</label>
						<div class="btn-group">
						<input placeholder="选择目录" id="selectPathInput" readonly>
						<button id="selectConfigPath">选择目录</button>
						</div>
					</div>
					<div class="localinstalltab" id="localInstallTab5">
					</div>

				</div>
				<!-- <div class="footer">
					<div class="btn-group" style="float: left;">
						<button class="helpLink" id="helpLink"></button>
						<button class="skipAll" id="skipAll" style="display:none"></button>
					</div>
					<div class="btn-group right" style="float: right;">
						<button class="prevStep" id="prevStep"></button>
						<button class="cancel" id="cancel" style="display:none"></button>
						<button class="nextStep" id="nextStep" type="submit"></button>
					</div>
				</div> -->
			</div>

		</div>
		<div class="indicator" id="indicator">
			<!-- <span class="step"></span>
			<span class="step"></span>
			<span class="step"></span>
			<span class="step"></span> -->
		</div>
		<div class="footer">
			<div class="btn-group" style="float: left;">
				<button class="helpLink" id="helpLink"></button>
				<button class="skipAll" id="skipAll" style="display:none"></button>
			</div>
			<div class="btn-group right" style="float: right;">
				<button class="prevStep" id="prevStep"></button>
				<button class="cancel" id="cancel" style="display:none"></button>
				<button class="nextStep" id="nextStep" type="submit"></button>
			</div>
		</div>
	</div>

	<script type="module" src="index.js"></script>
	<script type="module" src="common.js"></script>

</body>

</html>
